
<script setup lang="ts">
import { useFoldStore } from "../../store/modules/useFold";
import { useRoute } from "vue-router";
let $route = useRoute();
let useFold = useFoldStore();

</script>

<template>
    <div class="tabber_lift">
        <el-icon class="fold" @click="useFold.isFold">
            <component :is="useFold.fold?'Fold':'Expand'"></component>
        </el-icon>
        <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="(item, index) in $route.matched" :to="item.path" v-show="item.meta.title">       
                    <el-icon class="ic" >
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span v-if="item.meta.title">
                        {{ item.meta.title }}
                    </span>          
            </el-breadcrumb-item>

        </el-breadcrumb>
    </div>
</template>

<style lang="scss" scoped>
.tabber_lift {
    padding-left: 20px;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 100%;

    .fold {
        margin-right: 10px;
    }
    .ic{
        margin-right: 5px;
    }
    span{
        line-height: 100%;
    }

    el-icon{
        margin-top: 5xp;
    }
}
</style>